<template>
  <!--  上传的地址,action="https://jsonplaceholder.typicode.com/posts/" -->
  <!-- :before-upload上传之前的校验 -->
  <!-- :on-success上传成功的回调函数 -->
  <div class="UploadImg">
    <!-- 自定义上传组件的方法,在标签内绑定一个属性 :http-request="custom" -->
    <!-- :http-request是Emelent官网定义的方法 ,所以属性名不能错,在官网的Attribute里面,Attribute就是属性的意思 -->
    <!-- custom意识自定义 -->
    <!-- action="https://jsonplaceholder.typicode.com/posts/",可以不用，但是必须给一个地址，不然就报错，但是不影响代码运行 -->
    <el-upload
      class="avatar-uploader"
      action="https://jsonplaceholder.typicode.com/posts/"
      :show-file-list="false"
      :on-success="handleAvatarSuccess"
      :before-upload="beforeAvatarUpload"
      :http-request="customImg"
    >
      <!-- img标签 -->
      <!-- 为什么页面 显示默认是一个+号,选择图片后,就变成其他的了 -->
      <!-- 是因为这里v-if v-else做了判断 -->
      <img v-if="value" :src="value" class="avatar" />
      <!-- 图标 -->
      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
    <!-- 删除按钮 -->
    <i v-if="value" class="el-icon-error" @click="removeImg"></i>
  </div>
</template>

<script>
// 7月20号---------------------------7月20号---------------------------
// 使用腾讯云的对象存储上传文件(就是通过代码直接把文件上传到桶里去,同时文件地址也生成了)
// (111)导包,身份识别,身份秘钥 在sdk使用说明里面的,配置项,的格式四就这么一个网站,进去就能查看到自己桶里面的id了 https://console.cloud.tencent.com/cam/capi
// (333)下包npm i cos-js-sdk-v5 --save
// 导包
import COS from 'cos-js-sdk-v5'
// 实例化
const cos = new COS({
  SecretId: 'AKIDgBQP7YnlSs1uVpse9NO9espXy81dy2pM', // 身份识别 ID
  SecretKey: 'HI2VieJhpgHbfRwA7nCKBm69vSihPq2w' // 身份密钥
})
export default {
  props: {
    value: {
      type: String,
      default: ''
    }
  },
  // data里面的数据定义在了props里面
  // data () {
  //   return {
  //     imageUrl: ''
  //   }
  // },
  methods: {
    // 点击红色的图标x,删除图片逻辑
    removeImg () {
      // this.imageUrl = ''
      this.$emit('input', '')
    },
    // 111,自定义上传图片的方法 :http-request="customImg":http-request是Emelent官网定义的方法
    // 注意注意注意,这个参数要和下面cos里面的一样,
    customImg (params) {
      // 上传文件后打印出来 就有file对象,同时文件类型就是file,还有文件名字等等
      // console.log('params', params)
      // 同过上面得打印就可以拿到这个文件,然后就可以做提交逻辑了
      // params.file
      // ---------重点---------------------------------------------
      // (222)把上传对象里面的方法,赋值到自定义上传图片的方法中
      cos.putObject(
        {
          Bucket: 'hr70-1306581526' /* 必填,桶名 */,
          Region: 'ap-shenzhen-fsi' /* 必填,存储桶所在地域 */,
          Key: params.file.name /* 必填,文件名字,通过上面打开可以获取 */,
          StorageClass: 'STANDARD', // 固定值,不需要改
          Body: params.file, // 需要上传的文件,
          // 上传文件是,会一直执行
          onProgress: progressData => {
            console.log(JSON.stringify(progressData))
          }
        },
        // 上传完毕
        (err, data) => {
          // 打印出来,成功后有一个,statusCode: 200
          // Location就是图片地址 hr70-1306581526.cos.ap-shenzhen-fsi.myqcloud.com/106.jpg
          // 这个地址就可以访问了,同时自己的桶里面也多了一个文件
          // 但是要注意哦,这个Location返回的地址是没有https://协议的,所以需要自己加身上
          console.log(err || data)
          if (data.statusCode === 200) {
            console.log(data.Location)
            // this.imageUrl = 'https://' + data.Location
            this.$emit('input', 'https://' + data.Location)
          }
        }
      )
    },
    // 222,
    handleAvatarSuccess (res, file) {
      // res是接口的返回值,在notework里面的xhr可以看到对应服务器返回的数据
      // 在notework里面就可以得知,上传组件的本质,就是通过ajax发送请求,提交了一个FromData
      // 只不过以前是自己写,用了这个组件后,是组件自动帮我们搞定了
      // console.log('res', res)
      // 打印出来,就是获取到这个文件的信息 在file里面可以看到
      // file.raw 就是文件本身
      // console.log('file', file)
      // 生成一个本地的临时路径
      this.imageUrl = URL.createObjectURL(file.raw)
    },
    // 333,
    beforeAvatarUpload (file) {
      // 文件类型判断,
      // includes方法,表示某个数组是否包含给定的值
      const isJPG = ['image/jpeg', 'image/gif', 'image/png'].includes(file.type)
      // const isJPG = file.type === 'image/jpeg'
      // 文件大小判断
      const isLt2M = file.size / 1024 / 1024 < 10

      if (!isJPG) {
        // 类型不匹配
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        // 大小不匹配
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      // 如果是返回false就阻断代码执行了
      // true就正常上传了
      return isJPG && isLt2M
    }
  }
}
</script>

<style lang="scss">
.UploadImg {
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  // .el-icon-error {
  //   position: relative;
  //   color: red;
  //   font-size: 20px;
  //   top: -210px;
  //   right: -166px;
  // }
  .el-icon-error {
    position: absolute;
    color: red;
    font-size: 20px;
    top: -9px;
    right: 183px;
  }
}
</style>
